
import React, { Component } from 'react';

import {SearchBox} from './searchstyle'

import fetchjsonp from 'fetch-jsonp'

import { Drawer, List, NavBar, Icon ,Accordion} from 'antd-mobile';

class Search extends Component{

    constructor(props) {
        super(props)
    
        this.state = {
             listdata:[],
             listFalg:true,
             inputvalue:'',
             open:false,            
        }
    }
    //抽屉效果
    onOpenChange = (...args) => {
        
        this.setState({ open: !this.state.open });
        
      }


    //获取inputvalue 
    changedata=()=>{
      this.setState({
       inputvalue:this.search.value  
       })  
       //拼接不能写this.state.inputvalue，因为是是异步的
       //同时这个数据请求不能放在componentDidMount里面
       fetchjsonp("https://suggest.taobao.com/sug?q="+this.search.value+"&code=utf-8&area=c2c&nick=&sid=null&callback=jsonp156704243680049558")
       
       .then(res=>{
                    return res.json()
                    })
        .then(result=>{       
        const newdata=(result.result.map(item=>{
            return  item[0]
        }))
        
            this.setState({
                listdata:newdata
            })
            console.log(this.state.listdata)
        })
        .catch(err=>{
            console.log(err)
        })
            }

    focu=()=>{
        this.search.placeholder=''
    }
    blur=()=>{
        this.search.placeholder='搜索商品名称，品牌'
    }
    //返回
    back=()=>{
        const {goBack}=this.props.history
        goBack()
    }
    //渲染li标签
    renderItem=()=>{
      return  this.state.listdata && this.state.listdata.map(item=>{
            return (
                <li key={item}>
                    <i className="fa fa-search " id="icon-search" aria-hidden="true"></i>     
                       <a href="#" alt="">{item}</a>
                    <i className="fa fa-chevron-right " id="icon-right" aria-hidden="true"></i>
                </li>
            )
        }) 
    }
     
    
    render(){
         const sidebar = (
            <Accordion  className="my-accordion" onChange={this.onChange}>
            <Accordion.Panel header="面部护理">
              <List className="my-list" style={{background:"#6b6b6b"}}>
                <List.Item>眼部护理</List.Item>
                <List.Item>爽肤水/化妆水</List.Item>
                <List.Item>咖喱/凝胶</List.Item>
                <List.Item>精华</List.Item>
                <List.Item>面霜</List.Item>
                <List.Item>唇部护理</List.Item>
                <List.Item>洁面</List.Item>
                <List.Item>T区/特殊护理</List.Item>
                <List.Item>面膜</List.Item>
                <List.Item>乳液</List.Item>
                <List.Item>精油</List.Item>
                <List.Item>护肤套装</List.Item>
              </List>
            </Accordion.Panel>
            <Accordion.Panel header="彩妆">
              <List className="my-list" style={{background:"#6b6b6b"}}>
                <List.Item>眼部护理</List.Item>
                <List.Item>爽肤水/化妆水</List.Item>
                <List.Item>咖喱/凝胶</List.Item>
                <List.Item>精华</List.Item>
                <List.Item>面霜</List.Item>
                <List.Item>唇部护理</List.Item>
                <List.Item>洁面</List.Item>
                <List.Item>T区/特殊护理</List.Item>
                <List.Item>面膜</List.Item>
                <List.Item>乳液</List.Item>
                <List.Item>精油</List.Item>
                <List.Item>护肤套装</List.Item>
              </List>
            </Accordion.Panel>
            <Accordion.Panel header="身体护理">
              <List className="my-list" style={{background:"#6b6b6b"}}>
                <List.Item>眼部护理</List.Item>
                <List.Item>爽肤水/化妆水</List.Item>
                <List.Item>咖喱/凝胶</List.Item>
                <List.Item>精华</List.Item>
                <List.Item>面霜</List.Item>
                <List.Item>唇部护理</List.Item>
                <List.Item>洁面</List.Item>
                <List.Item>T区/特殊护理</List.Item>
                <List.Item>面膜</List.Item>
                <List.Item>乳液</List.Item>
                <List.Item>精油</List.Item>
                <List.Item>护肤套装</List.Item>
              </List>
            </Accordion.Panel>
            <Accordion.Panel header="香水">
              <List className="my-list" style={{background:"#6b6b6b"}}>
                <List.Item>眼部护理</List.Item>
                <List.Item>爽肤水/化妆水</List.Item>
                <List.Item>咖喱/凝胶</List.Item>
                <List.Item>精华</List.Item>
                <List.Item>面霜</List.Item>
                <List.Item>唇部护理</List.Item>
                <List.Item>洁面</List.Item>
                <List.Item>T区/特殊护理</List.Item>
                <List.Item>面膜</List.Item>
                <List.Item>乳液</List.Item>
                <List.Item>精油</List.Item>
                <List.Item>护肤套装</List.Item>
              </List>
            </Accordion.Panel>
            <Accordion.Panel header="男士护理">
              <List className="my-list" style={{background:"#6b6b6b"}}>
                <List.Item>眼部护理</List.Item>
                <List.Item>爽肤水/化妆水</List.Item>
                <List.Item>咖喱/凝胶</List.Item>
                <List.Item>精华</List.Item>
                <List.Item>面霜</List.Item>
                <List.Item>唇部护理</List.Item>
                <List.Item>洁面</List.Item>
                <List.Item>T区/特殊护理</List.Item>
                <List.Item>面膜</List.Item>
                <List.Item>乳液</List.Item>
                <List.Item>精油</List.Item>
                <List.Item>护肤套装</List.Item>
              </List>
            </Accordion.Panel>
            <Accordion.Panel header="套装礼盒">
              <List className="my-list" style={{background:"#6b6b6b"}}>
                <List.Item>眼部护理</List.Item>
                <List.Item>爽肤水/化妆水</List.Item>
                <List.Item>咖喱/凝胶</List.Item>
                <List.Item>精华</List.Item>
                <List.Item>面霜</List.Item>
                <List.Item>唇部护理</List.Item>
                <List.Item>洁面</List.Item>
                <List.Item>T区/特殊护理</List.Item>
                <List.Item>面膜</List.Item>
                <List.Item>乳液</List.Item>
                <List.Item>精油</List.Item>
                <List.Item>护肤套装</List.Item>
              </List>
            </Accordion.Panel>
            <Accordion.Panel header="美容工具">
              <List className="my-list" style={{background:"#6b6b6b"}}>
                <List.Item>眼部护理</List.Item>
                <List.Item>爽肤水/化妆水</List.Item>
                <List.Item>咖喱/凝胶</List.Item>
                <List.Item>精华</List.Item>
                <List.Item>面霜</List.Item>
                <List.Item>唇部护理</List.Item>
                <List.Item>洁面</List.Item>
                <List.Item>T区/特殊护理</List.Item>
                <List.Item>面膜</List.Item>
                <List.Item>乳液</List.Item>
                <List.Item>精油</List.Item>
                <List.Item>护肤套装</List.Item>
              </List>
            </Accordion.Panel>
            <Accordion.Panel header="其他">
              <List className="my-list" style={{background:"#6b6b6b"}}>
                <List.Item>眼部护理</List.Item>
                <List.Item>爽肤水/化妆水</List.Item>
                <List.Item>咖喱/凝胶</List.Item>
                <List.Item>精华</List.Item>
                <List.Item>面霜</List.Item>
                <List.Item>唇部护理</List.Item>
                <List.Item>洁面</List.Item>
                <List.Item>T区/特殊护理</List.Item>
                <List.Item>面膜</List.Item>
                <List.Item>乳液</List.Item>
                <List.Item>精油</List.Item>
                <List.Item>护肤套装</List.Item>
              </List>
            </Accordion.Panel>
          </Accordion>
        );
        return (
           <SearchBox> 
               <div className="inputbox">
                    <i 
                        icon={<Icon type="ellipsis" />} 
                        onClick={this.onOpenChange}
                        className="fa fa-chevron-left" aria-hidden="true">
                    </i> 
                    
                    <div className="input_outer">  
                        <i className="fa fa-search" aria-hidden="true"></i>                  
                        <input  type="text" onFocus={this.focu} onBlur={this.blur} onChange={this.changedata} placeholder="搜索商品名称，品牌" ref={el=>this.search=el} ></input>
                    </div>
                        <a className="search" href="#" alt="">
                             <i onClick={this.back} className="fa fa-home"
                             ></i>
                        </a>
                    </div>
                    <ul className="list">
                        {this.renderItem()}
                    </ul>
                    <Drawer
                        className="my-drawer"
                        style={{ minHeight: document.documentElement.clientHeight,width:'100%' }}
                        enableDragHandle
                        contentStyle={{ color: '#A6A6A6', textAlign: 'center', paddingTop: 42 }}
                        sidebar={sidebar}
                        open={this.state.open}
                        onOpenChange={this.onOpenChange}
                    >
                       Tip: search in the search box
                    </Drawer>
           </SearchBox> 
          )
        
    }
  }   
  
export default Search 